<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Project details for E-commerce Platform">
    <title>E-commerce Platform | John Doe</title>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@700&family=Fira+Code&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body class="font-inter bg-white text-dark">
    <!-- Navigation -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all">
        <nav class="container flex items-center justify-between py-4">
            <a href="/" class="font-montserrat font-bold text-primary text-xl">JD</a>
            <div class="hidden md:flex space-x-8">
                <a href="/" class="text-gray-600 hover:text-primary">Home</a>
                <a href="/about.html" class="text-gray-600 hover:text-primary">About</a>
                <a href="/projects.html" class="text-gray-600 hover:text-primary">Projects</a>
                <a href="/blog.html" class="text-gray-600 hover:text-primary">Blog</a>
                <a href="/contact.html" class="text-gray-600 hover:text-primary">Contact</a>
            </div>
            <button class="md:hidden" aria-expanded="false" aria-label="Menu">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </nav>
    </header>

    <!-- Project Detail Section -->
    <main class="container py-8 md:py-16">
        <article>
            <!-- Project Header -->
            <header class="mb-12">
                <div class="flex items-center mb-4">
                    <a href="/projects.html" class="text-primary hover:text-secondary flex items-center">
                        <i class="fas fa-arrow-left mr-2"></i> Back to Projects
                    </a>
                </div>
                <h1 class="font-montserrat text-3xl md:text-4xl font-bold mb-4">E-commerce Platform</h1>
                <p class="text-xl text-gray-600 mb-6">Full-stack e-commerce solution with React and Node.js</p>
                <div class="flex flex-wrap gap-2">
                    <span class="tag tag-primary">React</span>
                    <span class="tag tag-primary">Node.js</span>
                    <span class="tag tag-primary">MongoDB</span>
                    <span class="tag tag-primary">Redux</span>
                    <span class="tag tag-primary">Stripe</span>
                </div>
            </header>

            <!-- Project Gallery -->
            <section class="mb-12" aria-label="Project screenshots">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <picture>
                        <source srcset="/assets/images/project-detail1.webp" type="image/webp">
                        <img src="/assets/images/project-detail1.jpg" 
                             alt="E-commerce Platform Homepage" 
                             class="rounded-lg shadow-md w-full h-auto"
                             loading="lazy"
                             width="1200"
                             height="675">
                    </picture>
                    <picture>
                        <source srcset="/assets/images/project-detail2.webp" type="image/webp">
                        <img src="/assets/images/project-detail2.jpg" 
                             alt="E-commerce Platform Product Page" 
                             class="rounded-lg shadow-md w-full h-auto"
                             loading="lazy"
                             width="1200"
                             height="675">
                    </picture>
                </div>
            </section>

            <!-- Project Content -->
            <section class="prose max-w-none">
                <h2 class="font-montserrat text-2xl font-semibold mb-4">Project Overview</h2>
                <p>
                    This e-commerce platform was built to provide a seamless shopping experience with 
                    modern features like real-time inventory updates, personalized recommendations, 
                    and secure checkout process.
                </p>

                <h2 class="font-montserrat text-2xl font-semibold mt-8 mb-4">Key Features</h2>
                <ul>
                    <li>Product catalog with advanced filtering and search</li>
                    <li>User authentication and profile management</li>
                    <li>Shopping cart with persistent storage</li>
                    <li>Payment processing with Stripe integration</li>
                    <li>Admin dashboard for inventory management</li>
                    <li>Responsive design for all device sizes</li>
                </ul>

                <h2 class="font-montserrat text-2xl font-semibold mt-8 mb-4">Technical Details</h2>
                <p>
                    The application follows a microservices architecture with separate services for:
                </p>
                <ul>
                    <li>Frontend: React with Redux for state management</li>
                    <li>Backend: Node.js with Express</li>
                    <li>Database: MongoDB with Mongoose ODM</li>
                    <li>Search: Elasticsearch integration</li>
                    <li>Payments: Stripe API integration</li>
                </ul>

                <div class="mt-12 flex flex-col sm:flex-row gap-4">
                    <a href="#" class="btn btn-primary flex-1 text-center" aria-label="Visit live demo">
                        <i class="fas fa-external-link-alt mr-2"></i> Live Demo
                    </a>
                    <a href="#" class="btn btn-secondary flex-1 text-center" aria-label="View source code">
                        <i class="fab fa-github mr-2"></i> Source Code
                    </a>
                </div>
            </section>
        </article>
    </main>

    <!-- Footer -->
    <footer class="bg-dark text-white py-8">
        <div class="container">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p>&copy; 2023 John Doe. All rights reserved.</p>
                </div>
                <div class="flex space-x-6">
                    <a href="https://github.com" aria-label="GitHub" class="hover:text-primary">
                        <i class="fab fa-github text-xl"></i>
                    </a>
                    <a href="https://linkedin.com" aria-label="LinkedIn" class="hover:text-primary">
                        <i class="fab fa-linkedin text-xl"></i>
                    </a>
                    <a href="https://twitter.com" aria-label="Twitter" class="hover:text-primary">
                        <i class="fab fa-twitter text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Custom JS -->
    <script src="/js/app.js"></script>
</body>
</html>